<template>
  <div class="app-container">
    <div class="positionName">
      <div class="positionFlag" /><span>{{positionName}} - 招聘需求变化</span>
    </div>

    <div class="list">
      <div class="h100" ref="line_echartDom"></div>
    </div>

  </div>
</template>

<script>
import { getTrend } from "@/api/salary";
export default {
  name: "recruitNeedChanges",
  data() {
    return {
      list: null,
      loading: true,
      chartData: {},
      myChart: null,
      config: [],
      positionId: "",
    };
  },
  created() {
    this.positionId = this.$route.query.id;
    this.positionName = this.$route.query.name;
  },
  mounted() {
    this.getChartData();
  },
  methods: {
    getChartData() {
      const params = { id: this.positionId };
      getTrend(params).then((res) => {
        this.chartData = this.handleData(res.data);
        console.log(this.chartData);
        this.init();
      });
    },
    // 数据处理
    handleData(data) {
      // 降序
      data.sort((a, b) => {
        return b.value - a.value;
      });
      let dataArr = {
        name: [],
        value: [],
      };
      data.forEach((item) => {
        dataArr.name.push(item.generateTime);
        dataArr.value.push(item.companyNum);
      });
      return dataArr;
    },
    init() {
      if (!this.$refs["line_echartDom"]) return;
      this.myChart = this.$echarts.init(this.$refs["line_echartDom"]);
      let data = this.chartData.name,
        value = this.chartData.value;
      let option = {
        xAxis: {
          type: "category",
          data,
          name: "时间",
        },
        yAxis: {
          type: "value",
          value,
          name: "招聘人数",
        },
        series: [
          {
            data: value,
            type: "line",
            label: {
              normal: {
                show: true,
              },
            },
          },
        ],
      };

      option && this.myChart.setOption(option);
      window.addEventListener("resize", () => {
        if (this.myChart) {
          this.myChart.resize();
        }
      });
    },
  },
  beforeDestroy() {
    this.myChart.dispose();
  },
};
</script>

<style scoped>
.positionName {
  display: flex;
  width: 100vw;
  align-items: center;
  color: #333333;
  background-color: #edf6ff;
  height: 48px;
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 12px;
  margin-left: -56px;
  padding: 0 55px;
}
.h100 {
  height: 400px;
  width: 800px;
}
.list {
  /* height: 650px;
  overflow-y: auto; */
}
.app-container {
  padding-right: 56px;
  padding-top: 0;
}
.search-container {
  /* margin-bottom: 24px; */
}
.pagination {
  margin-top: 24px;
}
::v-deep .el-table th > .cell {
  color: rgba(0, 0, 0, 0.85);
}
::v-deep .el-table th {
  background-color: #fafafa;
}
::v-deep.el-form--inline .el-form-item {
  margin-right: 24px;
}
.filter-item {
  margin-bottom: 12px;
}

::v-deep .el-form-item {
  display: flex;
  align-items: center;
}
::v-deep .el-form-item__label {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 27px;
  min-width: 68px !important;
}
::v-deep .el-form-item__content {
  margin-left: 0 !important;
}
</style>
